<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试数据</title>
    <meta name="keywords" content="大数据位置,位置智能" />
    <meta name="description" content="大数据服务平台。" />
    <link rel="shortcut icon" href="http://api.map.baidu.com/favicon.ico">
    <link href="static/css/track.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="static/css/fontawesome/css/font-awesome.min.css">
    <link href="static/css/jquery.datetimepicker.css" rel="stylesheet" media="screen">
    <link href="static/css/pagination.css" rel="stylesheet" media="screen">
    <style type="text/css">
		#allmap{width:100%;height:500px;}
	</style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW"></script>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/jquery.datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="static/js/jquery.pagination.js" charset="UTF-8"></script>
    <script type="text/javascript" src="static/js/mousewheel.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="static/js/baiduTemplate.js"></script>
    <script type="text/javascript" src="static/js/esl/esl.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>

<body>
    <div id="mapContainer">
    </div>
    <div class="title">
        <p>
            <span class="name"></span>
            <span class="ctrl">
                    <i class="fa fa-chevron-down"></i>
                </span>
        </p>
    </div>
    <div id="track-btn" class="type-ctr active" data-tag="0">
        <a href="javascript:void(0)">实时监控</a>
    </div>
    <div id="track-btn-2" class="type-ctr" data-tag="1">
        <a href="javascript:void(0)">历史轨迹</a>
    </div>
    <div id="data-box">
        <div class="panel-mask">
            <img src="static/images/loading-1.gif" height="82" width="82">
         </div>
        <div class="panel">
            <input type="text" placeholder="请输入关键字" id="searchKey">
            <span class="search-i">
                <i class="fa fa-search"></i>
            </span>
            <a href="javascript:void(0)" class="btn filter">已选</a>
            <a href="javascript:void(0)" class="btn clean">清除已选</a>
            <div id="tracklist-panel"></div>

            <ul id="tracks-pager-ul" class="pagination"></ul>
        </div>
        <div id="track-box">
            <div class="date-panel">
                <span>查询日期 </span>
                <div class="date" id="div_date">
                    <span class="date-title" id="date"></span>
                    <span class="sele"><i class="fa fa-sort-desc"></i></span>
                </div>
            </div>
            <input type="text" placeholder="请输入关键字" id="searchKey_2">
            <span class="search-i">
                <i class="fa fa-search"></i>
            </span>
            <a href="javascript:void(0)" class="btn filter">已选</a>
            <a href="javascript:void(0)" class="btn clean">清除已选</a>
            <div class="tracks-panel" id="tracks-panel">
            </div>
            <ul id="tracks-pager-ul-2" class="pagination"></ul>
        </div>
        <div class="tip">
        </div>
    </div>
    <div class="mask">
        <img src="static/images/loading-1.gif" height="82" width="82">
    </div>
    <div class="timeline-ctrl">
        <canvas id="timeline" width="780px" height="60px"></canvas>
        <!-- <canvas id="cursor" width="1305px" height="60px"></canvas> -->
        <canvas id="timeCtr" width="16px" height="60px"></canvas>
    </div>
    <div id="time_span"></div>
    <div class="chart-ctrl">
        <div class="no-track-tip">请先勾选需要统计的轨迹！</div>
        <img src="static/images/11.png" height="52" width="52" alt="统计图">
        <span class="title">统计</span>

    </div>
    <div class="chart-wrap">
        <div id="chart"></div>

    </div>
    <div class="map-ctrl zoom-out" title="地图放大">
        <span><i class="fa fa-plus-circle"></i></span>
    </div>
    <div class="map-ctrl zoom-in" title="地图缩小">
        <span><i class="fa fa-minus-circle"></i></span>
    </div>
    <script type="text/html" id="tracklist-tmpl">
        <ul class="tracks-ul">
            <%for(var i=0; i<size; i++) { %>
                <li data-id="<%=trackList[i].track_id%>" data-name="<%=trackList[i].track_name%>" data-state="<%=trackList[i].state%>">
                    <%if(trackList[i].checked) { %>
                        <input type="checkbox" class="cbtest" checked="checked" id="cbtest_<%=trackList[i].track_id%>" />
                        <% } else { %>
                            <input type="checkbox" class="cbtest" id="cbtest_<%=trackList[i].track_id%>" />
                            <% } %>
                                <label for="cbtest_<%=trackList[i].track_id%>" class="check-box"></label>
                                <span class="state <%=trackList[i].state%>" title="<%=trackList[i].stateTxt%>"></span>
                                <span><%=trackList[i].track_name%></span>
                </li>
                <% } %>
        </ul>
    </script>
    <script type="text/html" id="sel-tracklist-tmpl">
        <ul class="seled-tracks-ul">
            <%for(var i=0; i<size; i++) { %>
                <li class="seled-track" id="seled-track-<%=trackList[i].track_id%>" data-id="<%=trackList[i].track_id%>" data-name="<%=trackList[i].track_name%>">
                    <%if(trackList[i].checked) { %>
                        <input type="checkbox" class="cbtest" checked="checked" id="cbtest2_<%=trackList[i].track_id%>" />
                    <% } else { %>
                        <input type="checkbox" class="cbtest" id="cbtest2_<%=trackList[i].track_id%>" />
                    <% } %>
                    <label for="cbtest2_<%=trackList[i].track_id%>" class="check-box"></label>
                    <span class="sel-track-name"><%=trackList[i].track_name%></span>
                    <span class="pro-bar" style="background-color: <%=trackList[i].barBgColor%>"><span class="bar"></span></span>
                    <span class="process play" title="回放轨迹" data-id="<%=trackList[i].track_id%>"><i class="fa fa-play"></i></span>
                </li>
                <% } %>
        </ul>
    </script>
    <script type="text/javascript" src="static/js/track/demo.js"></script>
    <script type="text/javascript" src="static/js/demoTrack.js"></script>
    <script type="text/javascript">
        // 百度地图API功能
        var sContent =
        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>001</h4>" + 
        "<img style='float:right;margin:4px' id='imgDemo' src='../img/123456.jpg' width='139' height='104' title='监控位置'/>" + "</div>";
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(121.442213, 31.21768);
        var marker = new BMap.Marker(point);
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        map.addOverlay(marker);
        marker.addEventListener("click", function(){          
           this.openInfoWindow(infoWindow);
           //图片加载完毕重绘infowindow
           document.getElementById('imgDemo').onload = function (){
               infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
           }
        });
    </script>
    
    <script type="text/javascript">
    var map = new BMap.Map("mapContainer", {
        // 关闭底图可点功能
        enableMapClick: false
    });
    
    function mapInit() {
        var point = new BMap.Point(121.442213, 31.21768);
        map.centerAndZoom(point, 12);
    }
    mapInit();
    // 设置酷黑个性化地图
    map.setMapStyle({
        styleJson: [{
            featureType: "land",
            elementType: "geometry",
            stylers: {
                color: "#212121"
            }
        }, {
            featureType: "building",
            elementType: "geometry",
            stylers: {
                color: "#2b2b2b"
            }
        }, {
            featureType: "highway",
            elementType: "all",
            stylers: {
                lightness: -42,
                saturation: -91
            }
        }, {
            featureType: "arterial",
            elementType: "geometry",
            stylers: {
                lightness: -77,
                saturation: -94
            }
        }, {
            featureType: "green",
            elementType: "geometry",
            stylers: {
                color: "#1b1b1b"
            }
        }, {
            featureType: "water",
            elementType: "geometry",
            stylers: {
                color: "#181818"
            }
        }, {
            featureType: "subway",
            elementType: "geometry.stroke",
            stylers: {
                color: "#181818"
            }
        }, {
            featureType: "railway",
            elementType: "geometry",
            stylers: {
                lightness: -52,
                visibility: "off"
            }
        }, {
            featureType: "railway",
            elementType: "all",
            stylers: {
                visibility: "off"
            }
        }, {
            featureType: "subway",
            elementType: "all",
            stylers: {
                visibility: "off"
            }
        }, {
            featureType: "all",
            elementType: "labels.text.stroke",
            stylers: {
                color: "#313131"
            }
        }, {
            featureType: "all",
            elementType: "labels.text.fill",
            stylers: {
                color: "#8b8787"
            }
        }, {
            featureType: "manmade",
            elementType: "geometry",
            stylers: {
                color: "#1b1b1b"
            }
        }, {
            featureType: "local",
            elementType: "geometry",
            stylers: {
                lightness: -75,
                saturation: -91
            }
        }, {
            featureType: "subway",
            elementType: "geometry",
            stylers: {
                lightness: -65
            }
        }, {
            featureType: "railway",
            elementType: "all",
            stylers: {
                lightness: -40
            }
        }, {
            featureType: "poi",
            elementType: "all",
            stylers: {
                visibility: "off"
            }
        }, {
            featureType: "highway",
            elementType: "labels.icon",
            stylers: {
                visibility: "off"
            }
        }]
    });
    // 设置个性化地图 最大缩放级别 18
    map.setMaxZoom(18);
    </script>
</body>

</html>
